<template>
  <div class='mobile-rating-wrapper'
      :class='{
        showValid: question.validType
      }'>
    <!-- 【注】 valid-tip-box 类名将作为paper页面的DOM索引，不能修改 -->
    <div class='valid-tip-box'
         v-if='question.validType === "required"'>
      请进行打分
    </div>
    <div class='valid-tip-box'
         v-if='question.validType === "rating_label"'>
      请至少选择一个标签
    </div>
    <!-- 星级、喜欢、微笑、点赞 -->
    <ul class='rating-img'>
      <li class='img-item survey-evaluate-sprite-bg-mini'
          v-for='(option, index) of question.optionList'
          :key='"img" + index'
          :class='{
            active: selectedIndex >= index,
            star: extendAttr.ratingType === "star",
            like: extendAttr.ratingType === "like",
            smile: extendAttr.ratingType === "smile",
            praise: extendAttr.ratingType === "praise"
          }'
          @click='selectOption(option, index)'>
        <div class='img-item-label'
            :class='{
              active: activeIndex === index
            }'>
          {{index + 1}}
        </div>
      </li>
    </ul>
    <div class='rating-desc'
         v-show='selectedIndex !== -1 && activeOption.desc'>
      "{{activeOption.desc}}"
    </div>
    <ul class='rating-labels'>
      <li class='labels-item'
          v-for='(label, labelIndex) of activeOption.labels'
          :key='"label" + labelIndex'
          :class='{
            active: question.labels.filter(text => text === label)[0]
          }'
          @click='selectLabel(label)'>
        {{label}}
      </li>
      <li class='labels-item'
          v-if='extendAttr.canWrite && selectedIndex !== -1'
          :class='{
            active: question.useWrite
          }'
          @click='toggleUseWrite'>
        写评价<span class='survey-sprite-bg write-icon'></span>
      </li>
    </ul>
    <field
      v-if='question.useWrite'
      class='rating-content'
      v-model="question.resultText"
      rows="4"
      autosize
      type="textarea"
      maxlength="999"
      placeholder="说说你的评价"
      show-word-limit
      :error="false"
      :disabled='isRecord'
    />
  </div>
</template>

<script>
import field from 'vant/lib/field'
import 'vant/lib/field/style'
export default {
  name: 'mobileRating',
  data () {
    return {
      extendAttr: {
        mustChooseOneLabel: false,
        canWrite: true,
        ratingType: 'star'
      },
      selectedIndex: -1,
      activeIndex: -1, // 用于短暂展示选中的评价
      activeOption: {},
      defaultSetting: [
        {
          desc: '非常不满意',
          labels: ['态度冷淡', '推销多', '技术差']
        },
        {
          desc: '比较不满意',
          labels: ['速度慢', '仪表乱', '不专业']
        },
        {
          desc: '一般',
          labels: ['无互助', '不积极', '业务不精']
        },
        {
          desc: '比较满意',
          labels: ['文明礼貌', '速度快', '较专业']
        },
        {
          desc: '非常满意',
          labels: ['热情好客', '敬业精神', '技能专业']
        }
      ]
    }
  },
  props: {
    question: {
      type: Object,
      default () {
        return {}
      }
    },
    isRecord: {
      type: Boolean,
      default: false
    }
  },
  components: {
    field
  },
  methods: {
    resetValidType () {
      this.question.validType = ''
    },
    toggleUseWrite () {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.question.useWrite = !this.question.useWrite
    },
    selectLabel (label) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      let existIndex = -1
      this.question.labels.forEach((text, index) => {
        if (text === label) {
          existIndex = index
        }
      })
      if (existIndex === -1) {
        this.question.labels.push(label)
      } else {
        this.question.labels.splice(existIndex, 1)
      }
    },
    selectOption (opt, index) {
      if (this.isRecord) {
        return false
      }
      this.resetValidType()
      this.selectedIndex = index
      this.activeOption = opt
      // 更新选中的评价层级选项
      this.question.optionList.forEach(option => {
        if (option.optionId === opt.optionId) {
          option.isSelected = true
        } else {
          option.isSelected = false
        }
      })
      // 清空标签
      this.question.labels = []
      this.question.useWrite = false
      // 展示选中的评价分值
      this.activeIndex = index
      setTimeout(() => {
        this.activeIndex = -1
      }, 700)
    },
    init () {
      // 获取评价题的扩展配置项
      let extendAttr = JSON.parse(this.question.extendAttr || '{}')
      this.assignKey(this.extendAttr, extendAttr)
      // 获取评价题每个选项的欸外配置项
      this.question.optionList.forEach((option, index) => {
        let extendAttr = JSON.parse(option.extendAttr || '{}')
        option.desc = this.defaultSetting[index].desc
        option.labels = this.defaultSetting[index].labels
        this.assignKey(option, extendAttr)
      })
      // console.log('optionList: ', this.question.optionList)
      // 如果是查看记录模式, 回显答题记录
      if (this.isRecord) {
        if (this.question.answer) {
          // let optionResults = this.question.answer.optionResults
          let optionResults = this.question.answer
          if (optionResults[0]) {
            let targetOption = optionResults[0]
            this.question.optionList.forEach((option, index) => {
              if (option.optionId === targetOption.optionId) {
                this.selectedIndex = index
                this.activeOption = option
                this.question.labels = targetOption.labels || []
                this.question.resultText = targetOption.resultText || ''
                if (this.question.resultText) {
                  this.question.useWrite = true
                }
              }
            })
          }
        }
      }
    }
  },
  created () {
    this.init()
  }
}
</script>

<style lang="stylus" scoped>
.mobile-rating-wrapper
  margin-top 10px
  border 1px solid #dde5ed
  border-radius 4px
  &.showValid
    position relative
    margin-top 30px
  .valid-tip-box
    position absolute
    top -20px
    left 0
    color #ef6262
    font-size 14px
  .rating-img
    height 36px
    display flex
    align-items center
    justify-content space-between
    padding 0 10px
    .img-item
      position relative
      width 18px
      height 18px
      cursor pointer
      &.star
        background-position 0 -2px
      &.like
        background-position -20px -2px
      &.smile
        background-position -40px -2px
      &.praise
        background-position -60px -2px
      &.active
        &.star
          background-position 0 -22px
        &.like
          background-position -20px -22px
        &.smile
          background-position -40px -22px
        &.praise
          background-position -60px -22px
      .img-item-label
        position absolute
        left -2px
        right 0
        top -26px
        width 22px
        height 18px
        line-height 18px
        text-align center
        background #ffbe3a
        color #fff
        font-size 12px
        border-radius 4px
        padding 0 2px
        transform translateY(100%)
        opacity 0
        transition all linear 0.2s
        box-sizing border-box
        &.active
          transform translateY(0)
          opacity 1
  .rating-desc
    text-align center
    font-size 12px
    font-weight 500
    padding 0 10px
    color #ffbe3a
    margin 5px 0 14px
    no-wrap()
  .rating-labels
    display flex
    flex-wrap wrap
    justify-content center
    .labels-item
      font-size 12px
      padding 5px
      color #aaa
      border 1px solid #d8d8d8
      border-radius 4px
      margin 0 2px 8px
      cursor pointer
      display flex
      align-items center
      &.active
        border-color #53a4f4
        color #53a4f4
        .write-icon
          background-position -366px -389px
      .write-icon
        width 12px
        height 12px
        background-position -294px -389px
  .rating-content
    border 1px solid #d8d8d8
    border-radius 4px
    margin 0 8px 8px
    width auto
    padding 5px 8px
    font-size 14px
    >>> .van-field__word-limit
      color #aaa
    >>> .van-field__control:disabled
      color inherit
</style>
